<script setup>
defineProps({
  tip: {
    type: String,
    default: '合计:'
  },
  symbol: {
    type: String,
    default: '¥'
  },
  price: {
    type: Number,
    default: 0
  },
  unit: {
    type: String,
    default: '份'
  },
  hideUnit: {
    type: Boolean,
    default: false
  },
  showTip: {
    type: Boolean,
    default: false
  }
})
</script>

<template>
  <view class="price-box">
    <text class="tip" v-if="showTip">{{ tip }}</text>
    <text class="symbol">￥</text>
    <text class="price">{{ price }}</text>
    <text class="unit" v-if="!hideUnit">/{{ unit }}</text>
  </view>
</template>

<style lang="scss" scoped>
.symbol, .price {
  font-weight: bold;
}

.price {
  font-size: $font-size-2;
}

.tip, .symbol, .unit {
  font-size: $font-size-5;
}

.unit {
  color: $black-3;
}
</style>
